<template>
	<div class="MerchantHeader">
		<div class="bg">
			<img class="backIcon" @click="$router.push('/home/index')" src="../assets/icon/left-arrow.png" >
			<img :src="merchantInfo.bgImg">
			<div class="padding"></div>
			<div class="title">
				<img class="avatar" :src="merchantInfo.avatar">
				<div class="headTitle">
					<div class="brand">品牌</div>
					<div class="h3">{{merchantInfo.name}}</div>
				</div>
			</div>
		</div>
		<div class="details">
			<div>{{merchantInfo.score}}</div>
			<div>月售{{merchantInfo.sellCount}}单</div>
			<div>达达专送</div>
			<div>约{{merchantInfo.deliveryTime}}分钟</div>
			<div>距离{{merchantInfo.distance}}</div>
		</div>
		<!-- 优惠券 -->
		<div class="yhq">
			<div class="tagGroup">
				<div class="tag" :class="supportsClasses[merchantInfo.supports[0].type]">{{merchantInfo.supports[0].name}}</div>
				<div class="title">{{merchantInfo.supports[0].content.slice(0,merchantInfo.supports[0].content.indexOf("("))}}</div>
			</div>
			<div>{{merchantInfo.supports.length}}个优惠</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				supportsClasses:["green","pink","orange"]
			}
		},
		props:["merchantInfo"],
		mounted(){
			
		}
	}
</script>

<style lang="scss" scoped>
@import "../scss/GLOBAL.scss";
.MerchantHeader {
	.bg {
		.backIcon {
			position: absolute;
			top: .31em;
			left: .31em;
			z-index: 2;
			width: 25px;
		}
		position: relative;
		img {
			width: 100%;
		}
		.padding {
			background-color: #fff;
			position: absolute;
			top: 45%;
			height: 45%;
			left: 0;
			right: 0;
		}
		.title {
			width: 100%;
			position: absolute;
			top: 40%;
			background-color: #fff;
			text-align: center;
			.avatar {
				margin-top: -40px;
				width: 90px;
			}
			// 品牌和标题
			.headTitle {
				display: flex;
				align-items: center;
				justify-content: center;
				.brand {
					background-color: #FFDE32;
					padding: 3px 5px;
					font-size: .9em;
					margin-right: 1em;
				}
				.h3 {
					font-size: 1.4em;
					font-weight: bold;
				}
			}

		}
	}
	.details {
		margin-top: 1.25em;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: .63em;
		>div {
			margin: 0 3px;
		}
	}
	.yhq {
		width: 70%;
		font-size: .8em;
		margin: 0 auto;
		padding-bottom: .53em;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.tagGroup {
			display: flex;
			align-items: center;
			.tag {
				margin-right: .625em;
				color: #fff;
				padding: 1px 5px;
				&.green {
					background-color: #6AAE3D;
				}
				&.pink {
					background-color: #FC7E70;
				}
				&.orange {
					background-color: #FE8D45;
				}
			}
		}
	}
}
</style>